<template>
	<view class="upgrade_wrapper">
		<view class="upgrade_background--one"></view>
		<view class="upgrade_background--two"></view>
		
		<view class="upgrade_wrap--info">
			<swiper indicator-dots="true" indicator-active-color="#00A8FF" @change="onSwiperChange" class="swiper_wrap">
				<swiper-item v-for="(item,index) in upgradeData" :key="index" class="swiper_item">
					<view class="upgrade_info">
						<!-- 上部标题 -->
						<view class="info_title">
							<view class="title_grade">{{item.profit_name}}</view>
							<view class="title_income">团队收益率{{item.profit_value*100}}%</view>
						</view>
						<!-- 中部图表 -->
						<view class="info_graph">
							<canvas :canvas-id="item.profit_name+'ringChart'" class="ring_chart"></canvas>
							<canvas :canvas-id="item.profit_name+'waterChart'" class="water_chart"></canvas>
							<view class="water_percentage">{{rangeValue*100}}%</view>
						</view>
						<!-- 下部升级信息 -->
						<view class="info_content">
							<view class="content_item">
								<text class="item_individual">个人持币</text>
								<text>(PCD)</text>
								<text>{{item.profit_total_amount | formatInt}}</text>
								<text>- 完成 -</text>
								<text>{{item.total_amount | formatInt}}</text>
							</view>
							<view class="content_item">
								<text class="item_directpush">直推人数</text>
								<text>(人数)</text>
								<text>{{item.profit_direct_invite_num | formatInt}}</text>
								<text>- 完成 -</text>
								<text>{{item.direct_invite_num | formatInt}}</text>
							</view>
							<view class="content_item">
								<text class="item_team">团队持币</text>
								<text>(PCD)</text>
								<text>{{item.profit_mine_total_amount | formatInt}}</text>
								<text>- 完成 -</text>
								<text>{{item.mine_total_amount | formatInt}}</text>
							</view>
						</view>
						<button class="upgrade_btn" @click="onUpgradeBtn">升级</button>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRing=null;

	export default {
		data(){
			return{
				upgradeData:[],	   	// 升级数据
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
				ringChartData:[], 	// 环形图数据
				currentSwiperIndex:0,
				// 水位图的参数
				bgColor:'rgba(0,168,255,0.8)',
				bgColorlimpid:'rgba(0,168,255,0.5)',
				rangeValue:0, 		// 当前实际水位，从0到1
				xOffset: 0, 		// 初始偏移
				speed: 0.08, 		// 偏移速度
				nowRange: 0, 		// 初始水位
				waterInterval: 0
			}
		},
		onLoad() {
			_self = this;
			this.cWidth=uni.upx2px(450);
			this.cHeight=uni.upx2px(450);
			this.getServerData();
		},
		onUnload(){
			clearInterval(this.waterInterval)
		},
		filters:{
			formatInt:function(number){
				if(number<10000){
					return parseInt(number)
				}else{
					return parseInt(number)/10000 + '万'
				}
			}
		},
		methods:{
			// swiper滑动事件
			onSwiperChange(event){
				this.currentSwiperIndex = event.detail.current
				clearInterval(this.waterInterval)
				this.upgradeData.forEach((item,index)=>{
					if(index===event.detail.current){
						// 设置水位图
						this.nowRange = 0
						this.xOffset = 0
						this.rangeValue = item.per
						this.initWaterCanvas(item.profit_name+'waterChart')

						this.ringChartData = {
							"series":[
								{
									'name':'个人持币',
									'data': parseFloat(item.total_amount)
								},
								{
									'name':'直推人数',
									'data': parseFloat(item.direct_invite_num)
								},
								{
									'name':'团队持币',
									'data': parseFloat(item.mine_total_amount)
								}
							]
						}
						this.showRing(item.profit_name+"ringChart",this.ringChartData);
					}
				})
			},
			// 获取等级数据
			getServerData(){
				this.$api.getMineUpgradeList({},res=>{
					if(res.data.type === 'ok'){
						this.upgradeData = res.data.message
						const ringChartData = {
							"series": [
									{
										'name':'个人持币',
										'data': parseFloat(this.upgradeData[0].total_amount)
									},
									{
										'name':'直推人数',
										'data': parseFloat(this.upgradeData[0].direct_invite_num)
									},
									{
										'name':'团队持币',
										'data': parseFloat(this.upgradeData[0].mine_total_amount)
									}
								]
						}
						// 设置水位图
						this.nowRange = 0
						this.rangeValue = this.upgradeData[0].per
						this.initWaterCanvas(this.upgradeData[0].profit_name+'waterChart')

						this.showRing(this.upgradeData[0].profit_name+"ringChart",ringChartData);
					}
				})
			},
			// 升级按钮
			onUpgradeBtn(){
				this.$api.setMineUpgrade({},res=>{
					uni.showToast({
						title:res.data.message,
						icon:'none'
					})
				})
			},
			showRing(canvasId,chartData){
				canvaRing=new uCharts({
					$this:_self,
					colors:['#2EAC57','#1B82E4','#763EC7'],
					canvasId: canvasId,
					type: 'ring',
					fontSize:11,
					legend:{
						show:false
					},
					// title: {
					// 	name: '70%',
					// 	color: '#7cb5ec',
					// 	fontSize: 25*_self.pixelRatio,
					// 	offsetY:-20*_self.pixelRatio,
					// },
					// subtitle: {
					// 	name: '收益率',
					// 	color: '#666666',
					// 	fontSize: 15*_self.pixelRatio,
					// 	offsetY:30*_self.pixelRatio,
					// },
					extra: {
						pie: {
						  offsetAngle: -45,
						  ringWidth: 5,
						  labelWidth:15
						}
					},
					background:'#2B2C48',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: true,
					dataLabel: false,
				});
			},
			touchRing(e){
				canvaRing.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			},
			// 水位初始化函数
			initWaterCanvas(id){
				const ctx = uni.createCanvasContext(id);
				const canvasWidth = uni.upx2px(320);
				const canvasHeight = uni.upx2px(320);
				this.waterInterval =  setInterval(() => {
					this.callPaintWater(ctx,canvasWidth,canvasHeight)
				}, 1000/20);	
			},
			// 水位调用函数，并处理偏离值
			callPaintWater(ctx,canvasWidth,canvasHeight) {
				ctx.clearRect(0, 0, canvasWidth, canvasHeight);
				// 曲线绘制
				this.paintWater(ctx,canvasWidth, canvasHeight,0.1,3,this.bgColor);
				this.paintWater(ctx,canvasWidth, canvasHeight,0.05,5,this.bgColorlimpid);
				ctx.draw();
				this.xOffset += this.speed;
				if (this.nowRange < this.rangeValue) {
					this.nowRange += 0.02;
				}
			},
			// 水位绘制函数
			// 这块的数据从形参里拿比从this拿快很多
			paintWater(ctx,canvasWidth,canvasHeight,wavWidth, wavHeight,fillColor) {
				// waveWidth  波浪宽度,数越小越宽
				// waveHeight 波浪高度,数越大越高
				const waveWidth = wavWidth; // 波浪宽度,数越小越宽
      			const waveHeight = wavHeight; // 波浪高度,数越大越高
				const points = [];
				const startX = 0;
				ctx.beginPath();
				for (let x = startX; x < startX + canvasWidth; x += 20 / canvasWidth) {
					const y = waveHeight * Math.sin((startX + x) * waveWidth + this.xOffset);
					points.push([x, (1 - this.nowRange) * canvasHeight + y]);
					ctx.lineTo(x, (1 - this.nowRange) * canvasHeight + y);
				}
				ctx.lineTo(canvasWidth, canvasHeight);
				ctx.lineTo(startX, canvasHeight);
				ctx.lineTo(points[0][0], points[0][1]);
				ctx.fillStyle = fillColor;
				ctx.fill();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin bg_layout{
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		background-color: #2B2C48;
		box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.31);
		border-radius: 10upx;
	}
	@mixin border__line_bgwhite--right{
		content:"";
		position:absolute;
		bottom:0;
		top:0;
		right:-50upx;
		border-right:1px solid #1A1B2B;
		-webkit-transform:scaleX(.5);
		-webkit-transform-origin:0 0;
	}

	.upgrade_wrapper{
		width: 100%;
		height: 100vh;
		background-color: #212238;
		position: relative;
	}
	.upgrade_background--one{
		width:92%;
		height:1000upx; 
		@include bg_layout;
	}
	.upgrade_background--two{
		width:85.9%;
		height:1050upx; 
		@include bg_layout;
	}
	.upgrade_wrap--info{
		width:80.3%;
		height:1100upx; 
		@include bg_layout;
		color: #ffffff;
		.swiper_wrap{
			width: 100%;
			height: 100%;
			.upgrade_info{
			width: 100%;
			height: 100%;
			overflow: hidden;
			.info_title{
				display: flex;
				flex-direction:column;
				justify-content: center;
				align-items: center;
				padding-top:20upx;
				box-sizing: border-box;
				.title_grade{
					display: inline-block;
					padding: 0 20upx;
					background-color: #2B2C48;
					font-size: 29px;
				}
				.title_income{
					width: 100%;
					position: relative;
					margin-top:10upx;
					text-align: center;
					font-size: 10px;
				}
				.title_income:after{
					content:"";
					position:absolute;
					bottom:80upx;
					left:0;
					right:0;
					z-index:-1;
					border-bottom:1px solid #1A1B2B;
					-webkit-transform:scaleY(.5);
					-webkit-transform-origin:0 0;
				}
			}
			.info_graph{
				position: relative;
				width: 422upx;
				height: 411upx;
				margin: 34upx auto 40upx auto;
				.ring_chart{
					width: 422upx;
					height: 411upx;
				}
				.water_chart{
					margin:65upx 0 0 65upx;
					width:320upx;
					height:320upx;
					background-color: #34355a;
					position:absolute;
					top:0;
					z-index:99;
					border-radius:50%;
					overflow:hidden;
					box-shadow:0px 3px 7px 0px rgba(255, 255, 255, 0.1);
				}
				.water_percentage{
					width:40%;
					text-align: center;
					position: absolute;
					left:35%;
					top:48%;
					z-index: 100;
					font-size: 20px;
				}
			}
			.info_content{
				display: flex;
				justify-content:space-around;
				.content_item{
					position: relative;
					display: flex;
					flex-direction:column;
					justify-content: space-around;
					align-items: center;
					text:first-child{
						font-size: 13px;	
					}
					.item_individual{
						color:#2EAC57;
					}
					.item_directpush{
						color:#1B82E4;
					}
					.item_team{
						color:#763EC7;
					}
					text:nth-child(2){
						font-size: 10px;	
					}
					text:nth-child(3){
						margin-top:10upx;
						font-size: 18px;	
					}
					text:nth-child(4){
						margin-top:10upx;
						font-size: 8px;	
					}
					text:nth-child(5){
						margin-top:10upx;
						font-size: 18px;	
					}
					
				}
				.content_item:after{
						@include border__line_bgwhite--right
				}
				.content_item:last-child:after{
						display: block;
				}
			}
			.upgrade_btn{
				width: 60%;
				margin: 40upx auto 0 auto;
				background-color: #00A8FF;
				border-radius: 50upx;
				color:#ffffff;
			}
		}
		}
	}
</style>
